<template>
  <div class="buttonWrap">
    <button v-if='type === "add"' @click='handleClick' :class='{button: true, add: true, disabled: disabled, small}'>
      <span class='iconfont' v-if='showIcon && !icon && type === "add"'>&#xe61c;</span>
      <span class='iconfont' v-if='showIcon && icon && type === "add"' v-html='icon'></span>
      {{!title && type === "add"? "新增" : title}}
    </button>
    <button v-if='type === "update"'  @click='handleClick'  :class='{button: true, update: true, disabled: disabled, small}'>
      <span class='iconfont'  v-if='showIcon && !icon && type === "update"' >&#xe626;</span>
      <span class='iconfont' v-if='showIcon && icon && type === "update"' v-html='icon'></span>
       {{!title && type === "update"? "修改" : title}}
    </button>
    <button v-if='type === "delete"'  @click='handleClick' :class='{button: true, delete: true, disabled: disabled, small}'>
      <span class='iconfont'  v-if='showIcon && !icon && type === "delete"'>&#xe689;</span>
      <span class='iconfont' v-if='showIcon && icon && type === "delete"' v-html='icon'></span>
      {{!title && type === "delete"? "删除" : title}}
    </button>
    <button v-if='type === "export"'  @click='handleClick' :class='{button: true, export: true, disabled: disabled, small}'>
      <span class='iconfont' v-if='showIcon && !icon && type === "export"'>&#xe644;</span>
      <span class='iconfont' v-if='showIcon && icon && type === "export"' v-html='icon'></span>
      {{!title && type === "export"? "导出" : title}}
    </button>
    <button v-if='type === "back"'  @click='handleClick'  :class='{button: true, back: true, disabled: disabled, small}'>
      <span class='iconfont' v-if='showIcon && !icon && type === "back"'>&#xe628;</span>
      <span class='iconfont' v-if='showIcon && icon && type === "back"' v-html='icon'></span>
      {{!title && type === "back"? "返回" : title}}
    </button>
    <button v-if='type === "cancel"'  @click='handleClick'  :class='{button: true, cancel: true, disabled: disabled, small}'>
      <!-- <span class='iconfont' v-if='showIcon && !icon && type === "back"'>&#xe628;</span> -->
      <span class='iconfont' v-if='showIcon && icon && type === "cancel"' v-html='icon'></span>
      {{!title && type === "cancel"? "取消" : title}}
    </button>
    <button v-if='type === "synchronize"'  @click='handleClick'  :class='{button: true, synchronize: true, icon:!icon, disabled: disabled, small}'>
      <span class='iconfont' v-if='showIcon && icon && type === "synchronize"' v-html='icon'></span>
      <span>{{!title && type === "synchronize"? "同步" : title}}</span>
    </button>
    <button v-if='type === "tag"'  @click='handleClick'  :class='{button: true, tag: true, icon:!icon, disabled: disabled, small}'>
      <span class='iconfont' v-if='showIcon && icon && type === "tag"' v-html='icon'></span>
      <span>{{!title && type === "tag"? "标签管理" : title}}</span>
    </button>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    type: String,
    disabled: Boolean,
    size: {
      type: String,
      default: ''
    }, // 按钮的大小
    showIcon: {
      type: Boolean,
      default: true
    }, // 是否显示icon
    icon: {
      type: String,
      default: ''
    }, // 按钮的iconfont
    title: {
      type: String,
      default: ''
    } // 按钮内容
  },
  computed: {
    small () {
      if (this.size === 'small') {
        return true
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    handleClick () {
      if (this.disabled) {
        return false
      }
      this.$emit('handleClick')
    }
  }
}
</script>

<style scoped lang="stylus">
.iconfont
  margin-right 2px
.buttonWrap
  display inline-block
  .button
    display inline-block
    line-height 1
    white-space nowrap
    cursor pointer
    background #fff
    border 1px solid #dcdfe6
    color #FFF
    -webkit-appearance none
    text-align center
    box-sizing border-box
    outline none
    margin 0
    transition .1s
    font-weight 500
    -moz-user-select none
    -webkit-user-select none
    -ms-user-select none
    padding 10px 14px
    font-size 14px
    border-radius 4px
    &.small
      padding: 8px 13px;
      font-size: 12px;
      border-radius: 3px;
    &.add
      background-color #409eff
      border-color #409eff
      &.disabled
        cursor not-allowed
        background-color: #a0cfff;
        border-color: #a0cfff
    &.cancel
      background-color: #fff
      border-color: #ccc;
      color #9797a1
      &.disabled
        cursor not-allowed
        background-color: #fff
        border-color: #ccc;
        color #9797a1
        &:hover
          background #fff
      &:hover
        background #e9eaf0
    &.delete
      background-color: #ff4949
      border-color: #ff4949;
      color #fff
      &.disabled
        cursor not-allowed
        background-color: #fab6b6
        border-color: #fab6b6;
        color #fff
      //   &:hover
      //     background #fff
      // &:hover
      //   background #e9eaf0
    &.update
      background-color: #89e7b3;
      border-color: #89e7b3;
      &.disabled
        cursor not-allowed
        background-color: rgb(225, 243, 216);
        border-color: rgb(225, 243, 216);
    &.export
      background-color: #ffba00;
      border-color: #ffba00;
      &.disabled
        cursor not-allowed
        background-color: #f3d19e;
        border-color: #f3d19e;
    &.back
      background-color: #909399;
      border-color: #909399;
      &.disabled
        cursor not-allowed
        background-color: #c8c9cc;
        border-color: #c8c9cc;
    &.synchronize
      padding-left 28px
      background-color #fff
      border-color #E7E7E8
      color #22242F
      &.disabled
        cursor not-allowed
        background-color: #909399;
      &.icon
        background #fff url('~assets/img/ic_tongbu@2x.png') no-repeat 8px center / 18px
    &.tag
      padding-left 28px
      background-color #f2f2f2
      border-color #f2f2f2
      color #4c84ff
      &.disabled
        cursor not-allowed
        background-color: #909399;
      &.icon
        background #f2f2f2 url('~assets/img/biaoqian@2x.png') no-repeat 8px center / 18px
</style>
